<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL解码与复制</title>
</head>
<body>

    <h1>URL 解码与复制示例</h1>

    <input type="text" id="encodedUrl" placeholder="输入编码后的URL" style="width: 300px;" />
    
    <!-- 复选框 -->
    <label>
        <input type="checkbox" id="removeHash" checked />
        去掉井号及之后的部分
    </label>
    
    <button onclick="decodeAndCopy()">解码并复制</button>
    <span id="copyStatus" style="margin-left: 10px; color: green;"></span>

    <p id="decodedUrl"></p>

    <script>
        function decodeAndCopy() {
            // 获取输入的编码后的URL
            let encodedUrl = document.getElementById("encodedUrl").value;

            // 获取复选框的状态
            const removeHash = document.getElementById("removeHash").checked;

            // 如果复选框被勾选，去掉井号及之后的部分
            if (removeHash) {
                const hashIndex = encodedUrl.indexOf('#');
                if (hashIndex !== -1) {
                    encodedUrl = encodedUrl.substring(0, hashIndex);
                }
            }

            // 使用 decodeURIComponent 解码
            const decodedUrl = decodeURIComponent(encodedUrl);
            
            // 显示解码后的URL
            document.getElementById("decodedUrl").innerText = "解码后的URL: " + decodedUrl;
            
            // 将解码后的URL复制到剪贴板
            navigator.clipboard.writeText(decodedUrl)
                .then(() => {
                    // 显示提示文字
                    const statusElement = document.getElementById("copyStatus");
                    statusElement.innerText = "已复制到剪贴板";
                    
                    // 5秒后清除提示文字
                    setTimeout(() => {
                        statusElement.innerText = '';
                    }, 5000);
                })
                .catch(err => {
                    console.error('复制到剪贴板失败:', err);
                });
        }
    </script>

</body>
</html>
